<template>
	<el-row class="clear-margin">
		<el-form-item :label="info.label">
			<el-col :span="11">
				<el-form-item prop="startNumber">
					<el-input class="input-width" size="<small></small>" v-model="startNumber" @change="valueFormatStart" placeholder="起始范围"></el-input>
				</el-form-item>
			</el-col>
			<el-col class="line" :span="2">~</el-col>
			<el-col :span="11">
				<el-form-item prop="endNumber">
					<el-input class="input-width" size="small" v-model="endNumber" @change="valueFormatEnd" placeholder="结束范围"></el-input>
				</el-form-item>
			</el-col>
		</el-form-item>
	</el-row>
</template>

<script>
	export default {
		props: ['toolInfo', 'reset'],
		data(){
			return {
				info: this.toolInfo,
				startNumber: '',
				endNumber: '',
			}
		},
		methods: {
			valueFormatStart: function(value){
				var reg = /^[0-9]*$/;
				if (!reg.test(value)){
					this.startNumber = parseInt(/^[0-9]*/.exec(value)[0]) || '';
				}
			},
			valueFormatEnd: function(value){
				var reg = /^[0-9]*$/;
				if (!reg.test(value)){
					this.endNumber = parseInt(/^[0-9]*/.exec(value)[0]) || '';
				}
				console.log(value);
			}
		},
		watch: {
			// 监听父组件的toolInfo变量
			'toolInfo': function(value){
				this.info = value;
			},
			// 监听父组件的reset状态
			'reset': function(){
				this.startNumber = '';
				this.endNumber = '';
			},
			// 向父组件传输number数据
			'startNumber': function(value){
				this.$emit('message', this.info.fieldName+'_start', 'number', value);
			},
			// 向父组件传输number数据
			'endNumber': function(value){
				this.$emit('message', this.info.fieldName+'_end', 'number', value);
			}
		}
	}
</script>
